import React, { Fragment, useEffect } from "react";
import styles from "./datePicker.less";
import { DatePicker, Form } from "antd";
import { customDatePicker } from "@/utils/utils";
import date_icon from "@/assets/icons/icon_date.png";
import date_icon_active from "@/assets/icons/icon_date_active.png";
import 'dayjs/locale/zh-cn';
import cn from "classnames";
import dayjs from 'dayjs';

interface DateProps {
  label?: string;
  startValue: any;
  endValue?: any;
  startTime?: any;
  endTime?: any;
  onChange: (e: any, str: string) => void;
  className?: any;
  picker?: string;
  idName1?: string;
  idName2?: string;
  format?: string;
  single?: boolean;
  mode?: "time" | "date" | "month" | "year" | "decade";
  dateClassNames?: string;
  onHandleOpenChange?: () => void;
  dropdownClassName?: string;
  disabled1?: boolean;
  disabled2?: boolean;
  disabledDate?: any; // 用单个时的禁用选项
  disabledEndDate?: any; //
  disabledStartDate?: any; //
}

const CusDatePicker = (props: DateProps) => {
  const {
    startValue,
    endValue,
    onChange,
    label,
    className,
    picker,
    idName1,
    idName2,
    format,
    single,
    dateClassNames,
    dropdownClassName,
    disabled1,
    disabled2,
    disabledDate,
    disabledEndDate,
    disabledStartDate
  } = props;
  useEffect(() => {
    customDatePicker(date_icon, idName1 || "date12345", idName2 || "date23456");
  }, []);
  const onOpenChange = (open: boolean, idName: string) => {
    customDatePicker(open ? date_icon_active : date_icon, idName, idName);
    // onHandleOpenChange&&onHandleOpenChange();
  };
  return (
    (<div className={cn(styles.date, className)}>
      {label && <span className={styles.date_label}>{label}</span>}
      <div>
        <DatePicker
          picker={picker || "date"}
          allowClear={false}
          size="small"
          format={format || "YYYY/MM/DD"}
          id={idName1 || "date12345"}
          value={startValue}
          suffixIcon={null}
          disabled={disabled1}
          onChange={(e) => {
            onChange(e, "start");
          }}
          // className={dateClassNames}
          onOpenChange={(open: boolean) => {
            onOpenChange(open, idName1 || "date12345");
          }}
          // dropdownClassName={dropdownClassName}
          disabledDate={
            disabledDate||disabledDate===false
              ? disabledDate
              : (currentDate: any) => {
                  return endValue
                    ? dayjs(currentDate).startOf("days").valueOf() >
                        dayjs(endValue).valueOf()
                    : false;
                }
          }
          className={dateClassNames || "my_date_picker"}
          popupClassName={dropdownClassName || "my_date_dropdown date"}
          // open
          // autoFocus
        />
      </div>
      {!single && (
        <Fragment>
          <div className={styles.date_line}></div>
          <div>
            <DatePicker
              allowClear={false}
              size="small"
              format={format || "YYYY/MM/DD"}
              id={idName2 || "date23456"}
              value={endValue}
              suffixIcon={null}
              onChange={(e) => onChange(e, "end")}
              disabled={disabled2}
              picker={picker}
              disabledDate={
                disabledEndDate
                  ? disabledEndDate
                  : (currentDate: any) => {
                      return endValue
                        ? dayjs(currentDate).startOf("days").valueOf() <
                            dayjs(startValue).valueOf()
                        : false;
                    }
              }
              // className={dateClassNames}
              onOpenChange={(open: boolean) => {
                onOpenChange(open, idName2 || "date23456");
              }}
              // dropdownClassName={dropdownClassName}
              className={dateClassNames || "my_date_picker"}
              popupClassName={dropdownClassName || "my_date_dropdown date"}
            />
          </div>
        </Fragment>
      )}
    </div>)
  );
};

export default CusDatePicker;
